<template>
    <div>
        <div class="card card-custom gutter-b example example-compact" id="tableBody">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
                    </span>
                    <h3 class="card-label"> 查询区域 </h3>
                </div>
                <div class="card-toolbar">
                    <div class="example-tools justify-content-center">
                    </div>
                </div>
            </div>
            <div class="card-body">
                <!--查询条件-->
                <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
                    <div class="m-portlet__body">
                        <div class="form-group m-form__group row">
                            <!--background: #f2f3f5;-->
                            <label class="col-form-label">状态:</label>
                            <div class="col-md-2">
                                <el-select maxlength="20" v-model="searchForm.status" placeholder="请选择">
                                    <el-option value="">请选择</el-option>
                                    <el-option
                                        v-for="item in [{value:'0',label:'发布中'},{value:'1',label:'已关闭'}]"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>

                            <label class="col-form-label">产品线:</label>
                            <div class="col-lg-2">
                                <el-select maxlength="20" v-model="searchForm.lcProductId" placeholder="请选择">
                                    <el-option value="">请选择</el-option>
                                    <el-option
                                    v-for="item in productList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                            <label class="col-form-label">产品组:</label>
                            <div class="col-lg-2">
                                <el-select maxlength="20" v-model="searchForm.lcGroupId" placeholder="请选择">
                                    <el-option value="">请选择</el-option>
                                    <el-option
                                    v-for="item in groupList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                            <label class="col-form-label">流程标题:</label>
                            <div class="col-lg-2">
                                <input type="text" class="form-control" v-model="searchForm.title"
                                    placeholder="请输入">
                            </div>
                            <b-button :pressed="false" variant="btn btn-primary font-weight-bold mr-2"
                                @click="search"><span><i class="fa fa-search"></i><span>查询</span></span></b-button>
                            <b-button :pressed="false" variant="btn btn-light font-weight-bold mr-2" @click="resetAll">
                                <span><span>清空条件</span></span></b-button>
                        </div>
                    </div>
                    <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                        <div class="m-form__actions m-form__actions--solid">
                            <div class="row">
                                <div class="col m--align-left">

                                </div>
                                <div class="col m--align-right">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group m-form__group row">
                <div class="col-md-3">
                    <!--
                        allow-batch 
                        whole-row 
                        draggable 可拖动
                        wholerow 显示连线
                        contextmenu 
                        dnd 
                        types 
                        search 
                        wholerow
                    -->
                    <!-- <VJstree :data="processList" @item-click="itemClick" ref="tree"></VJstree> -->
                    <!-- <div id="processTree" class="tree-demo" style='height:calc(100vh - 220px);overflow: auto;'>
                    </div> -->
                    <div class="m-portlet">
                        <div class="m-portlet__head" style="background: #f2f3f5">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <h3 class="m-portlet__head-text" style="padding: 10px;">
                                        流程项目
                                    </h3>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <el-tree 
                            :data="processList" 
                            title="流程项目" 
                            :props="defaultProps" 
                            @node-contextmenu="rightClick" @node-click="handleNodeClick">
                            <span class="custom-tree-node" slot-scope="{ node, data }">
                                <span>
                                <i
                                    v-if="data.children.length!==0"
                                    :class="[
                                    // node.expanded ? 'fas fa-folder-open': 'fas fa-folder'
                                    node.expanded ? 'fas fa-folder-minus': 'fas fa-folder-plus'
                                    
                                ]"
                                ></i>
                                <i v-if="data.children.length===0" class="flaticon2-google-drive-file"></i>
                                {{ node.label }}
                                </span>
                            </span>
                        </el-tree>
				    </div>
                </div>
                <div class="col-md-9">
                    <!--分页组件-->
                    <el-table style="width: 100%" stripe border @selection-change="handleSelectionChange"
                        highlight-current-row :data="dataList">                       
                        <el-table-column label="序号" min-width="50">
                            <template slot-scope="scope">
                                {{ scope.$index + 1 }}
                            </template>
                        </el-table-column>
                        <el-table-column align="left" prop="nodeName" show-overflow-tooltip label="名称"></el-table-column>
                        <el-table-column align="left" prop="mutil" show-overflow-tooltip label="会签节点" min-width="80">
                            <template slot-scope="scope">
                                <div v-if="scope.row.mutil == 20">
                                    <div class="symbol symbol-30 symbol-circle symbol-light-primary">									
                                        <span class="symbol-label font-size-h8">是</span>								
                                    </div>
                                </div>
                                <div v-else>                                    
                                    <div class="symbol symbol-30 symbol-circle symbol-light-info">									
                                        <span class="symbol-label font-size-h8">否</span>								
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" prop="nodeType" show-overflow-tooltip label="节点类型">
                            <template slot-scope="scope">
                                <div v-if="scope.row.nodeType == 'END'">
                                    <b-badge class="mr-1" variant="primary">结束节点</b-badge>
                                </div>
                                <div v-else-if="scope.row.nodeType == 'userTask'">
                                    <b-badge class="mr-1" variant="secondary">用户节点</b-badge>
                                </div>
                                <div v-else>
                                    <b-badge class="mr-1" variant="warning">未知</b-badge>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" show-overflow-tooltip label="发起人" min-width="80">
                            <template slot-scope="scope">
                                <div v-if="scope.row.initiator == 20" class="symbol symbol-30 symbol-circle symbol-light-primary">									
                                    <span class="symbol-label font-size-h8">是</span>								
                                </div>
                                <div  v-else class="symbol symbol-30 symbol-circle symbol-light-info">									
                                    <span class="symbol-label font-size-h8">否</span>								
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column align="left" prop="nodeType" show-overflow-tooltip label="规则" min-width="70">                            
                            <template slot-scope="scope">
                                <div v-if="scope.row.nodeType == 'userTask'">
                                    <div v-if="scope.row.id == '' || scope.row.id == null">
                                                                                
                                        <div class="symbol symbol-40 symbol-circle symbol-light-warning">									
                                            <span class="symbol-label font-size-h10" style="font-size: 8px;">未设定</span>								
                                        </div>
                                    </div>
                                    <div v-else>                                            
                                        <div class="symbol symbol-40 symbol-circle symbol-light-info">									
                                            <span class="symbol-label " style="font-size: 8px;">已设定</span>								
                                        </div>
                                    </div>
                                </div>
                                <div v-else>
                                    <b-badge class="mr-1" variant="secondary"></b-badge>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="nodeId" show-overflow-tooltip label="节点编号" min-width="150"></el-table-column>
                        <el-table-column align="center" prop="orderNumber" label="排序号" min-width="70"></el-table-column>
                        <el-table-column align="center" label="操作" fixed="left">
                            <template slot-scope="scope" min-width="80">
                                <!--scope.row当前行的对象-->
                                <a href="javascript:;"  v-if="scope.row.nodeType == 'userTask'" @click="showLcNodeAttributeEdit(scope.row)"
                                    class="btn btn-sm btn-clean btn-icon" title="#">
                                    <span class="svg-icon svg-icon-primary svg-icon-2x">
                                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                                            width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                <rect x="0" y="0" width="24" height="24" />
                                                <path d="M19,11 L21,11 C21.5522847,11 22,11.4477153 22,12 C22,12.5522847 21.5522847,
                                                        13 21,13 L19,13 C18.4477153,13 18,12.5522847 18,12 C18,11.4477153 18.4477153,11 19,
                                                        11 Z M3,11 L5,11 C5.55228475,11 6,11.4477153 6,12 C6,12.5522847 5.55228475,13 5,
                                                        13 L3,13 C2.44771525,13 2,12.5522847 2,12 C2,11.4477153 2.44771525,11 3,11 Z M12,
                                                        2 C12.5522847,2 13,2.44771525 13,3 L13,5 C13,5.55228475 12.5522847,6 12,6 C11.4477153,
                                                        6 11,5.55228475 11,5 L11,3 C11,2.44771525 11.4477153,2 12,2 Z M12,18 C12.5522847,18 13,
                                                        18.4477153 13,19 L13,21 C13,21.5522847 12.5522847,22 12,22 C11.4477153,22 11,
                                                        21.5522847 11,21 L11,19 C11,18.4477153 11.4477153,18 12,18 Z"
                                                    fill="#000000" fill-rule="nonzero" opacity="0.3" />
                                                <circle fill="#000000" cx="12" cy="12" r="3" />
                                            </g>
                                        </svg>
                                    </span>
                                </a>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <!-- 右键菜单 -->
        <div class="right_menu" id="menu" v-show="showRightMenu">
            <div class="btn-group-vertical" role="group" aria-label="Vertical button group">
                <button class="btn btn-light-success font-weight-bold mr-2" @click="showDetail">
                    <span><i class="fa flaticon-list"></i><span>流程信息</span></span>
                </button>
                <button class="btn btn-light-primary font-weight-bold mr-2" @click="showDeploymentHisImage">
                    <span><i class="la la-file-image-o"></i><span>流程监控</span></span>
                </button>
                <button class="btn btn-light-danger font-weight-bold mr-2" @click="nodeRightClick">
                    <span><i class="fa flaticon-interface-9"></i><span>流程节点</span></span>
                </button>
            </div>
        </div>        
        <LcProDetailWin ref="LcProDetailWinRef" @change="search"></LcProDetailWin>
        <LcHisDetailWin ref="LcHisDetailWinRef" @change="search"></LcHisDetailWin>
        <LcNodeAttributeImageWin ref="LcNodeAttributeImageWinRef" @change="search"></LcNodeAttributeImageWin><!--采用父窗口关闭传递的方法-->
        <lcNodeAttributeEdit ref="lcNodeAttributeEditRef" @change="search"></lcNodeAttributeEdit><!--采用父窗口关闭传递的方法-->
    </div>
</template>
  
<script>
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
import lcNodeAttributeEdit from "@/view/workflow/lc-node-attribute/lc-node-attribute-edit";
import LcNodeAttributeImageWin from "@/view/workflow/lc-node-attribute/lc-image-win";
import LcHisDetailWin from "@/view/workflow/lc-node-attribute/lc-his-detail";
import LcProDetailWin from "@/view/workflow/lc-node-attribute/lc-pro-detail";
import Swal from "sweetalert2";
import apiUtil from "@/core/util/apiUtil.js";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            productList: [],
            groupList: [],
            processList:[],
            defaultProps: {
                children: 'children',
                label: 'text'
            },
            showRightMenu:false,
            rightMenuData:null,
            searchForm: {status: "", lcProductId: "", lcGroupId: "", lcGroupId_: "", title: "" },
            dataList: [],
            sels: [], //当前选框选中的值
            currentText: "",      // 当前节点tree text
            currentType: "",    // 当前节点tree type
            currentId: ""   // 当前节点tree id
        }
    },
    components: {
        lcNodeAttributeEdit,
        LcNodeAttributeImageWin,
        LcHisDetailWin,
        LcProDetailWin,
    },
    watch: {
        "searchForm.lcProductId": {//监听字段变化
            handler: function (newVal, old) {
                this.searchForm.lcGroupId = "";
                if (newVal == "" || newVal == undefined || newVal == null) {
                    this.groupList = [];
                } else {
                    this.initGroupList(newVal)
                }
                if (this.searchForm.lcGroupId_ == "" || this.searchForm.lcGroupId_ == undefined || this.searchForm.lcGroupId_ == null) {

                } else {
                    this.searchForm.lcGroupId = this.searchForm.lcGroupId_;
                    this.searchForm.lcGroupId_ = "";
                }
            }
        },
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "流程节点" }]);
        this.currentId="-1";
        this.currentText="";
        this.currentType="2";
        this.initNodeDatables();
        this.initProductList();
        this.initTree();
    },
    methods: {
        initNodeDatables(id,title,type){
            let url = process.env.VUE_APP_WORKFLOW_API+'/lcDeploymentHis/userTasks/'+this.currentId;
            if(this.currentType ==  1){//主流程类型
                url = process.env.VUE_APP_WORKFLOW_API+'/lcProcess/userTasks/'+this.currentId;
            }
            showWating({ renderBody: "tableBody" });
            var params = {};
            params.searchJson = JSON.stringify(this.searchForm);//为form元素     
            apiUtil.queryPage(url, params).then(({ data }) => {
                this.dataList = data.data;//给结果集赋值
            });
        },
        handleSelectionChange(sels) {//获取选中的值
            this.sels = sels;
        },
        showLcNodeAttributeEdit(row) {// 更新            
            this.$refs.lcNodeAttributeEditRef.showModal(row);
        },       
        search() {
            this.initTree()
            this.initNodeDatables(); 
        },
        resetAll() {
            Object.assign(this.$data.searchForm, this.$options.data().searchForm);
            this.search();
        },
        initProductList() {
            let params = {};
            apiUtil.post(process.env.VUE_APP_WORKFLOW_API + "/lcProduct/find", params).then(({ data }) => {
                this.productList = data.data;
            });
        },
        initGroupList(id) {
            let params = {};
            apiUtil.query(process.env.VUE_APP_WORKFLOW_API + "/lcGroup/find/" + id, params).then(({ data }) => {
                this.groupList = data.data;
            });
        },
        handleNodeClick(data) {
            var domId = data.id;
            var type = data.tempObject;
            var text = data.text;
            this.currentId = domId;
            this.currentText = text;
            if(type == "C"){
                this.currentType = 2;
            }
            if(type == "P"){
                this.currentType = 1;
            }
            this.initNodeDatables();
        },
        initTree() {            
            let params = { title: this.searchForm.title, status: this.searchForm.status, lcProductId: this.searchForm.lcProductId, lcGroupId: this.searchForm.lcGroupId };
            apiUtil.query(process.env.VUE_APP_WORKFLOW_API + "/lcProcess/tree", params).then(({ data }) => {
                if (undefined == data.data || null == data.data || "" == data.data) {
                } else {
                    var data = eval("(" + data.data + ")");
                    this.processList = data;
                    return;                    
                }
            });
        },
        rightClick(event,data,node,obj){     
            this.rightMenuData =  data;       
			this.showRightMenu = true
            let menu = document.getElementById('menu')
            menu.style.left = event.pageX + 'px'
            menu.style.top = event.pageY+ 'px'
            document.addEventListener('click', this.closeRightMenu)
		},
		closeRightMenu() {
			this.showRightMenu = false
			document.removeEventListener('click', this.closeRightMenu)
            this.rightMenuData = null;
		},
        nodeRightClick(){
            let data = this.rightMenuData;
            if(null != data && "" != data){
                this.handleNodeClick(data);
            }
        },
        showDeploymentHisImage(){
            let data = this.rightMenuData;
            if(null != data && "" != data){
                this.$refs.LcNodeAttributeImageWinRef.showModal(data);
            }
        },
        showDetail(){
            let data = this.rightMenuData;
            if(null != data && "" != data){
                var type = data.tempObject;
                if(type == "P"){         
                    this.$refs.LcProDetailWinRef.showModal(data);
                }
                if(type == "C"){      
                    this.$refs.LcHisDetailWinRef.showModal(data);
                }
            }
        },
    }
};
</script>
<style scoped>
  .right_menu{
    position: absolute;
    width: auto;
    height: auto;
    background: rgb(239, 239, 241);
    border: 1px solid rgb(241, 241, 241);
    border-radius: 2%;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 30%);
  }
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    }
    ::-webkit-scrollbar-thumb {
    background-color: #f5f5f5;
    border-radius: 3px;
    }
</style>